<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex benben-position-layout flex flex-wrap align-center classification_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between flex-sub classification_fd0_0'>
					<view class='flex flex-wrap align-center classification_fd0_0_c0'>
						<text class='fu-iconfont2  classification_fd0_0_c0_c0'></text>
					</view>
					<view class='flex flex-wrap align-stretch justify-center'>
						<text class='classification_fd0_0_c1_c0'>预约</text>
					</view>
					<view class='flex flex-wrap align-center justify-end classification_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!-- 			<view style="width: 750rpx;padding-left: 2rpx;padding-bottom: 4rpx;">
				<u-tabs :list="jingang" :current='current' @change='changes' height="80" bar-width="26" bar-height="6"
					inactive-color="#707072" :is-scroll="true" name="subject_name" active-color="#333333"
					:bar-style='barTstyle'></u-tabs>
			</view> -->

			<view class="week-container">
				<view v-for="(day, index) in weekDays" :key="index" :class="{'day': true, 'active': isSelected(day)}"
					@click="selectDay0(day)">
					<view>{{ day.label }}</view>
					<view>{{ day.date }}</view>
				</view>
			</view>
			<!-- 			<view class="week-container" v-if="current==1">
				<view v-for="(day, index) in weekDays" :key="index" :class="{'day': true, 'active': isSelected(day)}"
					@click="selectDay1(day)">
					<view>{{ day.label }}</view>
					<view>{{ day.date }}</view>
				</view>
			</view> -->
			<!-- 			@tap.stop="handleJumpDiy" data-type="navigateTo"
								:data-url="`/pages/homePage/makeAnAppointment/makeAnAppointment?aid=1&type=1`" -->
			<view class="listinfo" v-if="isshow" v-for="(item,index) in homeList" :key="index">
				<view style="width: 702rpx;height: 200rpx;display: flex;align-items: center;">
					<view>
						<image :src='item.cover' mode="aspectFill"
							style="width: 148rpx;height: 148rpx;border-radius: 74rpx;margin-left: 16rpx;">
						</image>
					</view>
					<view style="height: 164rpx;margin-left: 16rpx;display: flex;flex-wrap: wrap;
						align-items: center;margin-left: 32rpx;">
						<view style="width: 308rpx;">
							<text>门票名称:{{item.name}}</text>
						</view>
						<view style="width: 308rpx;">
							<text>时段:{{item.startTime}}-{{item.endTime}}</text>
						</view>

						<!-- 					<view style="width: 308rpx;">
							<text>金额:{{item.price || '暂无'}}</text>
						</view> -->
					</view>
					<view class="atta">
						<view style="width: 200rpx;">
							<text>预约人数</text>
							<text style="margin-left: 10rpx;color:#167deb;">{{item.sold}}</text>/
							<text>{{item.stock}}</text>
						</view>


						<view v-if="" class="attr" @tap.stop="yuyue(item)">
							<text style="color:#fff;">预约</text>
						</view>

						<!-- 				<view class="attc">
							<text>已结束</text>
						</view> -->
					</view>
				</view>
			</view>

			<view style="display: flex;justify-content: center;margin-top: 106rpx;width: 750rpx;" v-if="isshow==false">
				<image src='../../../static/images/order.png' mode="aspectFill" style="width:440rpx;height: 328rpx;">
				</image>
			</view>
			<!---基本设置flex布局结束-->
			<benben-popup v-model="popupShow1656992350800" :mask="true" :mask-close-able="true" mode='center'>
				<view class="flex flex-direction flex-wrap align-center system_flex_2">
					<text class='system_fd2_0'>提示</text>
					<view>
						<text class='system_fd2_1'>预约数量:</text>
						<u-number-box v-model="value" @change="valChange" :min="1" :max="10" :disabledInput="true"></u-number-box>
					</view>
					<text class='system_fd2_1'
						style="margin-top: 20rpx;">确定预约{{sionFeeinfo.startTime}}-{{sionFeeinfo.endTime}}吗?</text>
					<view class='flex align-center system_fd2_2'>
						<button class='system_fd2_2_c0' @tap.stop="popupShow1656992350800=false">取消</button>
						<button class='system_fd2_2_c1' @tap.stop="confirmFunc()">确定</button>
					</view>
				</view>
			</benben-popup>
			<!-- <u-picker mode="time" v-model="showtime" :params="params" @confirm='confirm' title='请选择预约时间'></u-picker> -->

		</view>
	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false
				},
				showtime: false,
				"popupShow1656992350800": false,
				type: 0,
				barTstyle: {
					backgroundColor: '#167deb',
					'border-radius': '2rpx'
				},
				selectedDay: null,
				weekDays: [],
				current: 0,
				jingang: [{
						id: 0,
						name: '团课预约'
					},
					{
						id: 1,
						name: '私教预约'
					}
				],
				isshow: '',
				homeList: [],
				aid: '',
				sionFeeinfo: '',
				sijiaoinfo: '',
				venue: '',
				page: 1,
				userId: '',
				selectTime: '',
				isRefreshed: false,
				startTime: '00:00',
				endTime: '23:59',
				value: 1
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			isLogin() {
				return this.$store.state.token == '' ? false : true;
			}

		},
		watch: {},
		onLoad(options) {
			this.userId = uni.getStorageSync('userId')

			this.$bus.$on('refresh-event', (status) => {
				this.isRefreshed = status;
				console.log('页面刷新被触发');
				this.current = 0
				this.getWeekDays();
			});
			this.current = 0
			this.getWeekDays();
		},

		onShow() {
			this.getWeekDays();
		},
		onUnload() {
			// 移除监听事件  
			// uni.$off('shuaxin');
			this.$bus.$off('refresh-event');
		},
		onHide() {

		},

		onPullDownRefresh() {
			if (this.current == 0) {
				this.gethomeList()
			} else {
				this.getsijiao()
			}
		},
		onReachBottom(e) {

		},
		created() {


		},
		methods: {

			// confirm(e) {
			// 	console.log(e, 'eeeeeeeeeeee')
			// 	this.selectTime = e.hour + ':' + e.minute;
			// 	this.sijiaoFunc()
			// },
			// sijiaoyuyue(item) {
			// 	this.showtime = true
			// 	this.sijiaoinfo = item
			// },
			yuyue(item) {
				this.popupShow1656992350800 = true
				this.sionFeeinfo = item
			},

			// changes(e) {
			// 	console.log(e, 'tab栏索引')
			// 	this.current = e
			// 	if (this.current == 0) {
			// 		this.gethomeList()
			// 	} else {
			// 		this.getsijiao()
			// 	}
			// },
			valChange(e) {
				console.log('当前值为: ' + e.value)
				this.value = e.value
			},
			//获取景区门票列表
			async gethomeList() {

				if (this.isLogin == false) {
					return false
				}

				function addCurrentYearToDate(date) {
					const currentYear = new Date().getFullYear(); // 获取当前年份
					const [month, day] = date.split('-'); // 分离出月和日

					console.log(date, '传入的月份与日期');
					console.log(currentYear, '获取当前年份');
					console.log([month, day], '分离出月和日');

					// 获取当前日期
					const currentDate = new Date();
					const currentMonth = currentDate.getMonth() + 1; // 当前月份（1-12）
					const currentDay = currentDate.getDate(); // 当前日期（1-31）

					// 判断是否需要设置为下一年
					let year = currentYear;

					// 如果当前月份大于传入的月份，或者月份相同但是传入的日期小于今天的日期，则设置为下一年
					if (parseInt(month) < currentMonth || (parseInt(month) === currentMonth && parseInt(day) < currentDay)) {
						year = currentYear + 1;
					}

					console.log(year, '计算后的年份');
					return `${year}-${date}`; // 拼接年份和传入的日期
				}

				const formattedDate = addCurrentYearToDate(this.selectedDay.date);
				console.log(formattedDate, '处理后的日期');
				// let requestUrl = `${}/${this.venue.id}`;
				let res = await this.$api.get(global.apiUrls.admissionFee, {
					date: formattedDate,
					scenicId: 1
				});
				uni.stopPullDownRefresh();
				if (res.data.code == 200) {
					this.homeList = res.data.data;
					if (this.homeList.length == 0) {
						this.isshow = false
					} else {
						this.isshow = true
					}
					uni.hideLoading()
					console.log(this.homeList, 'this.团课预约列表')

				} else if (res.data.code == 401) {
					this.$store.commit('logout')
					uni.removeStorageSync('Ida');
					uni.removeStorageSync('code');
					this.$urouter.reLaunch(`/pages/tabBar/passwordLogin/passwordLogin`);
					return
				} else {
					this.$message.info(res.data.msg);
					return
				}
			},
			//确定预约
			async confirmFunc() {

				let res = await this.$api.post(global.apiUrls.checkAppointment, {
					ticketId: this.sionFeeinfo.id,
					num: this.value
				});
				if (res.data.data) {
					uni.navigateTo({
						url: `/pages/my/myAttention/myAttention?info=${JSON.stringify(this.sionFeeinfo)}&numValue=${this.value}`
					})
					this.popupShow1656992350800 = false
				} else {
					this.$message.info('当前时段预约人数过多，请选择其他时段');
				}

			},
			//确定私教预约
			// async sijiaoFunc() {
			// 	let isCorrect = this.isTimeAllowed(this.startTime, this.endTime, this.selectTime)
			// 	console.log(isCorrect, '选中的时间是否可以')
			// 	if (isCorrect == false) {
			// 		this.$message.info(`请选择${this.startTime}到${this.endTime}区间的时间`, 5000)
			// 		return
			// 	}

			// 	uni.showLoading()
			// 	function addCurrentYearToDate(date) {
			// 		const currentYear = new Date().getFullYear(); // 获取当前年份
			// 		const [month, day] = date.split('-'); // 分离出月和日

			// 		console.log(date, '传入的月份与日期');
			// 		console.log(currentYear, '获取当前年份');
			// 		console.log([month, day], '分离出月和日');

			// 		// 获取当前日期
			// 		const currentDate = new Date();
			// 		const currentMonth = currentDate.getMonth() + 1; // 当前月份（1-12）
			// 		const currentDay = currentDate.getDate(); // 当前日期（1-31）

			// 		// 判断是否需要设置为下一年
			// 		let year = currentYear;

			// 		// 如果当前月份大于传入的月份，或者月份相同但是传入的日期小于今天的日期，则设置为下一年
			// 		if (parseInt(month) < currentMonth || (parseInt(month) === currentMonth && parseInt(day) < currentDay)) {
			// 			year = currentYear + 1;
			// 		}

			// 		console.log(year, '计算后的年份');
			// 		return `${year}-${date}`; // 拼接年份和传入的日期
			// 	}

			// 	const formattedDate = addCurrentYearToDate(this.selectedDay.date);
			// 	console.log(formattedDate, '处理后的日期');
			// 	let res = await this.$api.post(global.apiUrls.addsijiao, {
			// 		coachId: this.sijiaoinfo.coachId, //教练id
			// 		cardId: this.sijiaoinfo.cardId, //课程卡id
			// 		memberCardId: this.sijiaoinfo.id,
			// 		memberId: this.userId, //用户id
			// 		reservationDate: formattedDate, //时间日期
			// 		teachStartTime: this.selectTime //时间小时
			// 	});
			// 	if (res.data.code != 200) {
			// 		uni.hideLoading()
			// 		this.$message.info(res.data.msg, 2000);
			// 		return
			// 	}
			// 	uni.hideLoading()
			// 	this.getsijiao()
			// 	this.$message.info('私教预约成功')
			// 	this.popupShow1656992350800 = false
			// },
			// isTimeAllowed(startTime, endTime, selectedTime) {
			// 	console.log(startTime, '自定义开始时间')
			// 	console.log(endTime, '自定义结束时间')
			// 	console.log(selectedTime, '选中的时间')
			// 	// 将时间字符串转换为分钟数
			// 	function timeToMinutes(time) {
			// 		const [hours, minutes] = time.split(':');
			// 		return parseInt(hours) * 60 + parseInt(minutes);
			// 	}

			// 	const startMinutes = timeToMinutes(startTime);
			// 	const endMinutes = timeToMinutes(endTime);
			// 	const selectedMinutes = timeToMinutes(selectedTime);

			// 	// 检查时间是否允许
			// 	if (startMinutes < endMinutes) {
			// 		// 情况1: 开始时间和结束时间在同一天
			// 		return selectedMinutes >= startMinutes && selectedMinutes <= endMinutes;
			// 	} else {
			// 		// 情况2: 开始时间和结束时间不在同一天（跨夜）
			// 		return selectedMinutes >= startMinutes || selectedMinutes <= endMinutes;
			// 	}
			// },
			//获取私教课列表
			// async getsijiao() {
			// 	if (this.isLogin == false) {
			// 		return false
			// 	}
			// 	let info = uni.getStorageSync('USER_INFO')
			// 	if (info.isMaCoach) {
			// 		this.homeList = []
			// 		this.isshow = false
			// 		return false
			// 	}
			// 	this.homeList = []
			// 	let requestUrl = `${global.apiUrls.memberInfo}/${this.userId}`;
			// 	let res = await this.$api.get(requestUrl);
			// 	if (res.data.code != 200) {
			// 		this.$message.info(res.data.msg);
			// 		return
			// 	}
			// 	this.homeList = res.data.data.coachCardList
			// 	if (this.homeList == null || res.data.data == null || this.homeList.length == 0) {
			// 		console.log('~~~~~~~~~~~~~~~~~~~')
			// 		this.isshow = false
			// 	} else {
			// 		this.isshow = true
			// 	}
			// 	this.getgymInfo()
			// 	console.log(this.homeList, '私教课列表1')
			// },


			//获取健身房开始与结束
			// async getgymInfo() {
			// 	let venue = uni.getStorageSync('venueInfo')
			// 	let venue2 = uni.getStorageSync('gymIda')
			// 	let id = venue.id ? venue.id : venue2
			// 	let requestUrl = `${global.apiUrls.gymInfo}/${id}`;
			// 	let res = await this.$api.get(requestUrl);
			// 	if (res.data.code != 200) {
			// 		this.$message.info(res.data.msg);
			// 		return
			// 	}
			// 	if (res.data.data.startTime) {
			// 		this.startTime = res.data.data.startTime
			// 		this.endTime = res.data.data.endTime
			// 		console.log(this.startTime, '开始时间')
			// 		console.log(this.endTime, '结束时间')
			// 	}

			// 	// this.startHour = this.extractHour(start);
			// 	// console.log(this.startHour, '开始时间'); // 输出 2

			// 	// this.endHour = this.extractHour(end);
			// 	// console.log(this.endHour, '结束时间'); // 输出 20
			// },

			// extractHour(timeString) {
			// 	// 提取小时部分
			// 	let hour = parseInt(timeString.split(':')[0], 10);

			// 	// 根据小时数，选择返回值
			// 	if (hour >= 0 && hour < 10) {
			// 		return timeString[1]; // 返回单个数字
			// 	} else if (hour > 9 && hour <= 24) {
			// 		return timeString.substring(0, 2); // 返回两个数字
			// 	} else {
			// 		return null; // 如果不在范围内，返回null
			// 	}
			// },



			getWeekDays() {
				const today = new Date();
				const weekDays = Array.from({
					length: 7
				}).map((_, i) => {
					let tempDate = new Date(today);
					tempDate.setDate(today.getDate() + i);
					return {
						date: `${tempDate.getMonth() + 1}-${tempDate.getDate()}`,
						label: `周${'日一二三四五六'[tempDate.getDay()]}`,
						rawDate: tempDate
					};
				});
				this.weekDays = weekDays;
				this.selectedDay = this.weekDays.find(day => day.rawDate.toDateString() === new Date().toDateString());
				console.log('当前日期为(初次渲染时)', this.selectedDay.date, this.weekDays);
				this.gethomeList()
			},
			selectDay0(day) {
				this.selectedDay = day;
				console.log('当前日期为(点击选中时1)', this.selectedDay.date);
				this.gethomeList()
			},
			selectDay1(day) {
				this.selectedDay = day;
				console.log('当前日期为(点击选中时2)', this.selectedDay.date);
				this.getsijiao()
			},
			isSelected(day) {
				return this.selectedDay && this.selectedDay.date === day.date;
			}
		},

	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #f7f7f7;
		background-size: 100% auto;
	}

	.week-container {
		display: flex;
		justify-content: space-between;
		background: #fff;
	}

	.day {
		text-align: center;
		padding: 10px;
	}

	.active {
		background-color: #007BFF;
		/* Bootstrap 蓝色 */
		color: white;
	}

	.listinfo {
		//display: flex;
		margin-top: 24rpx;
		background: #fff;
		width: 722rpx;
		margin-left: 16rpx;
		margin-right: 16rpx;
		border-radius: 24rpx;
	}

	.classification_flex_0 {
		background: var(--benbenbgColor1);
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.searchResult_flex_2 {
		background: #fff;
		min-height: 730rpx;
		padding: 32rpx 32rpx 0 32rpx;
	}

	.classification_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.classification_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
	}

	.system_flex_2 {
		background: #fff;
		width: 540rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.system_fd2_0 {
		font-size: 36rpx;
		font-weight: 800;
		line-height: 44rpx;
		color: #333333;
		margin: 40rpx 0rpx 40rpx 0rpx;
	}

	.system_fd2_1 {
		line-height: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.system_fd2_2_c1 {
		border-top: 1px solid #eee;
		border-left: 1px solid #eee;
		background: transparent;
		line-height: 110rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: #167deb;
		width: 268rpx;
	}

	.system_fd2_2_c0 {
		border-top: 1px solid #eee;
		background: #fff;
		line-height: 110rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: rgba(153, 153, 153, 1);
		padding: 0rpx 103rpx 0rpx 103rpx;
	}

	.system_fd2_2 {
		margin: 37rpx 0rpx 0rpx 0rpx;
	}

	.RegistrationQuestionnaireSurvey_flex_2 {
		background: var(--benbenbgColor1);
		padding: 0rpx 24rpx 32rpx 32rpx;
	}

	.RegistrationQuestionnaireSurvey_fd2_1_c0 {
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.RegistrationQuestionnaireSurvey_fd2_0_c1_c1_c1_c0 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.RegistrationQuestionnaireSurvey_fd2_0_c1_c1_c1 {
		background: rgba(118, 192, 255, 0.1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		width: 165rpx;
		height: 72rpx;
		margin: 0rpx 8rpx 8rpx 0rpx;
	}

	.RegistrationQuestionnaireSurvey_fd2_0_c1_c1_c0_c0 {
		font-size: 28rpx;
		font-weight: 500;
	}

	.job-box {
		width: 100%;
		max-height: 700rpx;
		overflow-y: scroll;
	}

	.job_select_box {
		width: 100%;
		height: 88rpx;
	}

	.bg-h {
		background: #76c0ff !important;
		color: #fff !important;
	}

	.bg-n {
		background: rgba(118, 192, 255, 0.1);
		color: #333 !important;
	}

	.RegistrationQuestionnaireSurvey_fd2_0_c1_c1_c0 {
		border-radius: 16rpx;
		/* width: 165rpx;
	height: 72rpx; */
		padding: 16rpx 50rpx;
		margin: 0rpx 8rpx 8rpx 0rpx;
	}

	.RegistrationQuestionnaireSurvey_fd2_0_c1_c0 {
		color: #7b7f96;
		font-size: 28rpx;
		font-weight: 400;
		margin: 24rpx 0rpx 24rpx 0rpx;
	}

	.RegistrationQuestionnaireSurvey_fd2_0_c1 {
		padding: 0rpx;
	}

	.attr {
		width: 148rpx;
		height: 56rpx;
		background: #167deb;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 28rpx;
		margin-left: 24rpx;
		margin-top: 24rpx;
	}

	.attc {
		width: 148rpx;
		height: 56rpx;
		background: #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 28rpx;
		margin-left: 24rpx;
		margin-top: 24rpx;
	}

	.atta {
		height: 148rpx;
		margin-right: 16rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.RegistrationQuestionnaireSurvey_fd2_0_c0_c0 {
		color: #666666;
		font-size: 32rpx;
		font-weight: 500;
	}

	.RegistrationQuestionnaireSurvey_fd2_0_c0 {
		padding: 32rpx 0rpx 8rpx 0rpx;
	}

	.classification_fd0_0_c0 {
		width: 120rpx;
	}

	.classification_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.classification_flex_1 {
		width: 750rpx;
		height: 100rpx;
		overflow: hidden;
		z-index: 10;
		top: 88rpx;
	}

	.classification_fd1_1 {
		width: 40rpx;
		height: 40rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.classification_fd1_0_c0 {
		line-height: 76rpx;
	}

	.classification_fd1_0 {
		background: rgba(248, 248, 250, 1);
		width: 622rpx;
		height: 68rpx;
		border-radius: 59rpx 59rpx 59rpx 59rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
		margin: 36rpx 32rpx 36rpx 16rpx;
	}

	.classification_flex_2 {
		padding: 0rpx 24rpx 0rpx 24rpx;
	}

	.classification_fd2_0_c1_c0_c1 {
		background: #f5f5f6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		width: 220rpx;
		height: 64rpx;
		margin: 0rpx 13rpx 20rpx 0rpx;
	}

	.classification_fd2_0_c1_c0_c0_c0 {
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		max-width: 144rpx;
		font-size: 24rpx;
		font-weight: 400;
	}

	.classification_fd2_0_c1_c0_c0 {
		background: #F06600;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		width: 220rpx;
		height: 64rpx;
		margin: 0rpx 13rpx 20rpx 0rpx;
		color: #fff;
	}

	.classification_fd2_0_c0 {
		color: #333333;
		font-size: 28rpx;
		font-weight: bold;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.classification_fd2_0 {
		margin: 15rpx 0rpx 0rpx 0rpx;
	}
</style>